<template>
  <div class="goods">
    <!-- 菜单 -->
    <div class="menu-wrapper">
      <ul>
        <li v-for="(item,index) in goods" :key="`${item}-${index}`" class="menu-item">
          <span class="text border-1px">
            <span v-show="item.type>0" class="icon"
              :class="classMap[item.type]">
            </span>
            {{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <!-- 商品 -->
    <div class="foods-wrapper"></div>
  </div>
</template>

<script>
const ERR_OK = 0;
export default {
  props: {
    seller: {
      type: Object
    }
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];

    this.$http.get('/api/goods').then((res) => {
      res = res.body;
      if (res.errno === ERR_OK) {
        this.goods = res.data
      }
    });
  },
  data () {
    return {
      goods: []
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../common/scss/mixins";
@import "../../common/scss/base";
  .goods{
    display: flex;
    position: absolute;
    top: 174px;
    bottom: 46px;
    width: 100%;
    overflow: hidden;
    .menu-wrapper{
      flex: 0 0 80px;
      width: 80px;
      background-color: #f3f5f7;
      text-align: center;
      .menu-item{
        display: table;
        height: 54px;
        width: 56px;
        line-height: 14px;
        padding: 0 12px;
         .icon {
          display: inline-block;
          vertical-align: top;
          width: 12px;
          height: 12px;
          margin-right: 2px;
          background-size: 12px 12px;
          background-repeat: no-repeat;
          &.decrease {
            @include bg-image("decrease_3");
          }
          &.discount {
            @include bg-image("discount_3");
          }
          &.guarantee {
            @include bg-image("guarantee_3");
          }
          &.invoice {
            @include bg-image("invoice_3");
          }
          &.special {
            @include bg-image("special_3");
          }
        }
        .text{
          display: table-cell;
          width: 56px;
          vertical-align: middle;
          font-size: 12px;
          @include border-1px(rgba(7,17,27,0.2));
        }
      }
    }
    .foods-wrapper{
      flex: 1;

    }
  }
</style>
